import { TabBar } from "antd-mobile";
import {
  AppOutline,
  ShopbagOutline,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import { useNavigate, useLocation } from "react-router-dom";

const NavTab = () => {
  const nav = useNavigate();
  const location = useLocation();
  const { pathname } = location;
  // console.log(location);

  const tabs = [
    {
      key: "/",
      title: "首页",
      icon: <AppOutline />,
    },
    {
      key: "/lists",
      title: "列表",
      icon: <UnorderedListOutline />,
    },
    {
      key: "/cart",
      title: "购物车",
      icon: <ShopbagOutline />,
    },
    {
      key: "/user",
      title: "我的",
      icon: <UserOutline />,
    },
  ];

  return (
    <>
      <TabBar
        activeKey={pathname}
        onChange={(v) => {
          nav(v);
        }}
      >
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </>
  );
};
export default NavTab;
